<template>
  
         <el-menu
      :default-active="activePath"
      class="el-menu-vertical-demo"
    
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      :unique-opened="true"
      :collapse-transition="false"
      :router="true">
      <el-submenu :index="item.path + ''" v-for="item in message" :key="item.title">
        <template slot="title">
          <i :class="item.icon"></i>
          <span>{{item.title}}</span>
        </template>


          <el-menu-item :index="subItem.path" v-for="subItem in item.children" :key="subItem.menu_id" @click="saveNavState(subItem.path)">
           <!-- 图标 -->
                <i :class="subItem.icon"></i>
                <!-- 文本 -->
                <span>{{subItem.title}}</span>
          </el-menu-item>
          
      </el-submenu>  


       <!-- <el-submenu index="2">
        <template slot="title">
          <i class="el-icon-location"></i>
          <span>列表导航2</span>
        </template>


          <el-menu-item index="/scrolltest">
            <i class="el-icon-menu"></i>
            <span slot="title">导航-3</span>
          </el-menu-item>
          
      </el-submenu>       -->
    </el-menu>

</template>

<script>
// import {menu_list} from "../router" //引入之后 赋值给data中 的数据
    export default {
      props:['message'],
        data() {
          return {
            // menu_list:menu_list,
            // menu_list:this.$t('message.zh'),
            activePath: '',
          }
        },
        created() {
          this.activePath = window.sessionStorage.getItem('activePath')
        },
        methods: {
          saveNavState(activePath) {
      window.sessionStorage.setItem('activePath', activePath)
      this.activePath = activePath
    },
        },
        //  watch: {
        //   //侦听单选按钮的变化，从而进行切换语言
        //   language: function(val) {
        //       val === "zh" ? (this.$i18n.locale = "zh") : (this.$i18n.locale = "en");
        //   },
        // },
    }
</script>

<style scoped>
 .el-menu{
        height: 100% !important;
        border: none;
    }
    .el-icon-location{
      margin-right: 10px;
    }
   ::v-deep .el-submenu__title{
      padding-left: 0 !important;
    }
</style>